<template>
  <div>
    <nav-header :headerTitle="'实名认证'" :navBgColor="'#fff'"></nav-header>
    <section class="page" v-show="show.pageShow">
      <div class="success" v-if="show.type == 'success'">
        <div class="header">
          <div class="null65"></div>
          <img src="@/assets/images/name_icon_yes.png" alt />
          <div class="null39"></div>
          <div>恭喜，您已完成了实名认证！</div>
        </div>
        <div class="section">
          <div class="null48"></div>
          <div class="s-content">
            <div class="null48"></div>
            <div class="c-weight">请添加平台管理员微信，为您免费开</div>
            <div class="c-weight">通接广告权限</div>
            <div class="null48"></div>
            <div class="c-font">说明：您需要向管理员提供微信通讯陆人数</div>
            <div class="c-font">
              <span class="c-red">截图</span>，管理员确认您的好友
              <span class="c-red">大于200</span>
            </div>
            <div class="c-font">将立即为您开启接广告权限。</div>
            <div class="null48"></div>
            <div class="c-red">管理员微信：{{show.adminWxNum}}</div>
          </div>
        </div>
        <div class="footer">
          <div class="f-btn" @click="success" :data-clipboard-text="show.adminWxNum">复制微信</div>
        </div>
      </div>
      <div class="fail" v-else-if="show.type == 'fail'">
        <div class="null280"></div>
        <img src="@/assets/images/name_icon_no.png" alt />
        <div class="null39"></div>
        <div>很抱歉，您的认证失败了</div>
        <div>原因：身份照片上传错误，请重新上传</div>
        <div class="footer">
          <div class="f-btn" @click="fail">重新认证</div>
        </div>
      </div>
      <div class="check" v-else-if="show.type == 'check'">
        <div class="null280"></div>
        <img src="@/assets/images/name_icon_wait.png" alt />
        <div class="null39"></div>
        <div>提交成功，请耐心等待</div>
        <div>审核人员正加班加点对信息进行审核</div>
      </div>
      <div v-else class="save">
        <div class="null48"></div>
        <div class="p-header">为了保障广告主的权益，您需要完实名认证后才可以接任务赚钱</div>
        <div class="p-section">
          <div class="ps-items-img">
            <div class="content">
              <img
                class="zheng-img"
                v-show="show.idPositiveImgUrl"
                :src="show.idPositiveImgUrl"
                alt
              />
              <img
                class="zheng-img"
                v-show="!show.idPositiveImgUrl"
                src="@/assets/images/name_up.png"
                @click="upImg('idPositiveImgUrl')"
                alt
              />
              <span class="zheng">上传身份证正面</span>
              <img class="fan-img" v-show="show.idOppositeImgUrl" :src="show.idOppositeImgUrl" alt />
              <img
                class="fan-img"
                v-show="!show.idOppositeImgUrl"
                src="@/assets/images/name_down.png"
                @click="upImg('idOppositeImgUrl')"
                alt
              />
              <span class="fan">上传身份证反面</span>
            </div>
          </div>
          <div class="ps-items">
            <div class="content">
              <span>输入名字</span>
              <input type="text" v-model="show.idName" placeholder="请输入身份证上的名字" />
            </div>
          </div>
          <div class="ps-attention">
            <div class="psa-content">
              <img src="@/assets/images/name_tip.png" alt />
              <p>请注意您的支付宝/微信提现账号信息必须和身份证</p>
            </div>
            <p>证件上一致！</p>
          </div>
        </div>
        <div class="null460"></div>
        <div class="p-footer">
          <div class="pf-btn" @click="save">提交资料</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
import navHeader from "@/components/NavHeader";
import mixin from "@/utils/mixin";
export default {
  name: "Realname",
  mixins: [mixin],
  components: {
    navHeader
  },
  data() {
    return {
      show: {
        pageShow: false,
        adminWxNum: "无",
        type: "",
        uniqueId: window.localStorage.getItem("uniqueIdByInfluencer"),
        idName: "",
        idPositiveImgUrl: "",
        idOppositeImgUrl: ""
        // idPositiveImgUrl:
        //   "https://yfunchat.oss-cn-shenzhen.aliyuncs.com/micro-ads/shop/bg/bg1.png",
        // idOppositeImgUrl:
        //   "https://yfunchat.oss-cn-shenzhen.aliyuncs.com/micro-ads/shop/bg/bg3.png"
      }
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init: function() {
      this.params = {
        uniqueId: this.show.uniqueId
      };
      this.$http.post("user/getUserInfo", this.params).then(
        res => {
          console.log(res);
          this.show.pageShow=true;
          res = res.data;
          //res.realNameCertStatus = 1;
          if (res.realNameCertStatus == 0) {
            this.show.type = "save";
          } else if (res.realNameCertStatus == 1) {
            this.show.type = "check";
          } else if (res.realNameCertStatus == 2) {
            this.show.type = "success";
          } else if (res.realNameCertStatus == 3) {
            this.show.type = "fail";
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    adminWxNum() {
      this.$http.post("soft/getWapConfig", {}).then(
        res => { 
          let wapConfig = res.data;  
          this.show.adminWxNum =wapConfig.adminWxNum;
        },
        err => {
          console.log(err);
        }
      );
      
    },
    success() {
      this.copy(".f-btn");
    },
    fail() {
      this.show.type = "save";
    },
    save() {
      if (!this.show.idPositiveImgUrl) {
        Toast({
          forbidClick: true,
          message: "上传身份证正面!"
        });
        return false;
      }
      if (!this.show.idOppositeImgUrl) {
        Toast({
          forbidClick: true,
          message: "上传身份证反面!"
        });
        return false;
      }
      if (!this.show.idName) {
        Toast({
          forbidClick: true,
          message: "请输入身份证上的名字!"
        });
        return false;
      }
      this.params = this.show;
      this.$http.post("user/authentication", this.params).then(
        res => {
          console.log(res);
          Toast.success({
            forbidClick: true,
            message: "保存成功",
            onClose: () => {
              this.goUrl("infMine", {});
            }
          });
        },
        err => {
          console.log(err);
        }
      );
    },
    upImg(type) {
      //alert(type);
      let parmas = {
        maxCount: 1, //选择相册的最大数，若是相机拍照则只能为1
        sourceType: ["album", "camera"], //相册&&拍照，可选其一
        method: "userRealNameCertImg"
      };
      this.$bridge.callHandler("chooseImages", parmas, res => {
        let imagesArr = res.split(",");
        if (type == "idPositiveImgUrl") {
          this.show.idPositiveImgUrl = imagesArr[0];
        } else if (type == "idOppositeImgUrl") {
          this.show.idOppositeImgUrl = imagesArr[0];
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  margin-top: 86px;
  .content {
    width: 100%;
    height: 100%;
    position: relative;
    border-bottom: 2px solid rgba(237, 237, 237, 1);
  }
  .null16 {
    width: 100%;
    height: 16px;
  }
  .null39 {
    width: 100%;
    height: 39px;
  }
  .null48 {
    width: 100%;
    height: 48px;
  }
  .null65 {
    width: 100%;
    height: 65px;
  }
  .null280 {
    width: 100%;
    height: 280px;
  }
  .null323 {
    width: 100%;
    height: 323px;
  }
  .null460 {
    width: 100%;
    height: 460px;
  }
  .success {
    background: rgba(248, 249, 251, 1);
    position: fixed;
    top: 86px;
    left: 0;
    right: 0;
    bottom: 0;
    .header {
      width: 100%;
      height: 433px;
      background: rgba(255, 255, 255, 1);
      text-align: center;
      img {
        width: 206px;
        height: 186px;
      }
      div {
        width: 100%;
        font-size: 34px;
        font-family: PingFangSC-Semibold;
        font-weight: bold;
        color: rgba(48, 49, 51, 1);
      }
    }
    .section {
      width: 100%;
      .s-content {
        width: 686px;
        margin: auto;
        height: 456px;
        background: rgba(255, 255, 255, 1);
        border-radius: 24px;
        div {
          width: 100%;
          text-align: center;
        }
        .c-weight {
          font-size: 34px;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: rgba(48, 49, 51, 1);
        }
        .c-font {
          font-size: 30px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(48, 49, 51, 1);
        }
        .c-red {
          font-size: 30px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(255, 37, 37, 1);
        }
      }
    }
    .footer {
      width: 100%;
      position: fixed;
      left: 0px;
      bottom: 16px;
      .f-btn {
        width: 562px;
        height: 88px;
        line-height: 88px;
        text-align: center;
        margin: auto;
        background: rgba(255, 37, 37, 1);
        border-radius: 44px;
        font-size: 34px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
  .fail {
    text-align: center;
    img {
      width: 206px;
      height: 186px;
    }
    div {
      width: 100%;
      font-size: 34px;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      color: rgba(48, 49, 51, 1);
    }
    .footer {
      width: 100%;
      position: fixed;
      left: 0px;
      bottom: 16px;
      .f-btn {
        width: 562px;
        height: 88px;
        line-height: 88px;
        text-align: center;
        margin: auto;
        background: rgba(255, 37, 37, 1);
        border-radius: 44px;
        font-size: 34px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
  .check {
    text-align: center;
    img {
      width: 206px;
      height: 186px;
    }
    div {
      width: 100%;
      font-size: 34px;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      color: rgba(48, 49, 51, 1);
    }
  }

  .save {
    .p-header {
      width: 686px;
      height: 112px;
      font-size: 34px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(48, 49, 51, 1);
      line-height: 56px;
      margin: auto;
    }
    .p-section {
      .ps-items-img {
        height: 398px;
        padding-left: 32px;
        padding-right: 32px;
        .zheng {
          font-size: 30px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(48, 49, 51, 1);
          position: absolute;
          left: 58px;
          top: 292px;
        }
        .zheng-img {
          width: 300px;
          height: 196px;
          background: rgba(248, 249, 251, 1);
          border-radius: 8px;
          position: absolute;
          left: 16px;
          top: 64px;
        }
        .fan {
          font-size: 30px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(48, 49, 51, 1);
          position: absolute;
          right: 58px;
          top: 292px;
        }
        .fan-img {
          width: 300px;
          height: 196px;
          background: rgba(248, 249, 251, 1);
          border-radius: 8px;
          position: absolute;
          right: 16px;
          top: 64px;
        }
      }
      .ps-items {
        height: 128px;
        padding-left: 32px;
        padding-right: 32px;
        span {
          font-size: 34px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(48, 49, 51, 1);
          position: absolute;
          left: 0px;
          top: 40px;
        }
        input {
          position: absolute;
          left: 168px;
          width: 500px;
          top: 40px;
          font-size: 34px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
        }
        input::-webkit-input-placeholder {
          color: rgba(200, 200, 200, 1);
        }
      }
      .ps-attention {
        padding-left: 32px;
        padding-right: 32px;
        margin-top: 32px;
        p {
          font-size: 28px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(129, 129, 129, 1);
        }
        .psa-content {
          width: 100%;
          height: 100%;
          position: relative;
          img {
            width: 28px;
            height: 28px;
            position: absolute;
            top: 6px;
            left: 0px;
          }
          p {
            padding-left: 40px;
            margin-bottom: 6px;
          }
        }
      }
    }
    .p-footer {
      width: 100%;
      position: fixed;
      left: 0px;
      bottom: 16px;
      .pf-btn {
        width: 562px;
        height: 88px;
        line-height: 88px;
        text-align: center;
        margin: auto;
        background: rgba(255, 37, 37, 1);
        border-radius: 44px;
        font-size: 34px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>
